<script lang="ts" setup>
import { useUserAddress } from '@/stores/user-address'
import appointmentSend from './components/appointment-send.vue'
import { ref, computed, onMounted } from 'vue'

const userAddress = useUserAddress()

// 储存子组件传递时间
const selectedTime = ref('')

// 商品规格
const goodsSize = ref([
  { id: 1, text: '小物件', value: 'small', price: 1 },
  { id: 2, text: '中物件', value: 'medium', price: 1.5 },
  { id: 3, text: '大物件', value: 'large', price: 2.0 }
])

// 使用数组存储选中的规格（支持多选）
const selectedSizes = ref<string[]>([])

// 计算总价
const totalPrice = computed(() => {
  return selectedSizes.value.reduce((sum, value) => {
    const item = goodsSize.value.find(item => item.value === value)
    return sum + (item?.price || 0)
  }, 0)
})

// 处理规格选择变化
const handleSizeChange = (e: any) => {
  selectedSizes.value = e.detail.value
}

// 跳转到修改地址
const onReviseAddress = () => {
  uni.navigateTo({
    url: '/pages-sub/service-module/address-change',
  })
}

// 立即下单 支付
const handlePlaceOrder = () => {
  console.log(selectedSizes.value, userAddress.addressData)
}

// 初始化默认选中第一个
onMounted(() => {
  if (goodsSize.value.length > 0) {
    selectedSizes.value = [goodsSize.value[0].value]
  }
})
</script>

<template>
  <view class="delivery">
    <!-- 取件地址 送达地址 送达时间 -->
    <view class="delivery-address">
      <view class="delivery-address-take">
        <h4>取件地址</h4>
        <view>蜂鸟快递站</view>
      </view>
      <view class="delivery-address-take">
        <h4>送达地址</h4>
        <view v-if="userAddress.addressData" class="delivery-address-take-address" @click="onReviseAddress">
          <text>{{ userAddress.addressData.dormitory || '暂无配送地址' }}</text>
          <uni-icons custom-prefix="iconfont" color="#505050" type="icon-you" size="22"></uni-icons>
        </view>
      </view>
      <view class="delivery-address-take">
        <h4>送达时间</h4>
        <view class="delivery-address-take-time">
          <appointmentSend v-model="selectedTime" />
        </view>
      </view>
    </view>
    <!-- 物品信息 -->
    <view class="delivery-information">
      <h1 class="delivery-information-h1">物品信息</h1>
      <!-- 规格大小 -->
      <view class="delivery-information-size">
        <h4 class="delivery-information-h4">规格大小</h4>
        <checkbox-group @change="handleSizeChange">
          <label class="delivery-information-size-checkbox" v-for="item in goodsSize" :key="item.id">
            <checkbox class="custom-checkbox" :checked="selectedSizes.includes(item.value)" :value="item.value" />
            {{ item.text }} <text style="color: red;">/{{ item.price }}元</text>
          </label>
        </checkbox-group>
      </view>
      <!-- 取件码 -->
      <view class="delivery-information-encoding">
        <h4 class="delivery-information-h4">取件码</h4>
        <view class="delivery-information-encoding-input">
          <input type="text" placeholder="取件码">
        </view>
      </view>
      <!-- 注意事项 -->
      <view class="delivery-information-encoding">
        <h4 class="delivery-information-h4">注意事项</h4>
        <view class="delivery-information-encoding-input">
          <input type="text" placeholder="添加备注">
        </view>
      </view>

    </view>
    <!-- 立即下单 -->
    <view class="delivery-purchase">
      <view class="delivery-purchase-flex">
        <view class="delivery-purchase-price">
          <h4 class="delivery-purchase-price-h4">￥{{ totalPrice || 0 }}</h4>
          <text class="delivery-purchase-price-text">跑腿费</text>
        </view>
        <view class="delivery-purchase-payment" @click="handlePlaceOrder">
          立即下单
        </view>
      </view>
    </view>
  </view>
</template>



<style scoped lang="scss">
.delivery {
  /* 为底部固定按钮留出空间，防止内容被遮挡 */
  padding-bottom: 120rpx;

  &-address {
    padding: $uni-padding;
    border-radius: $uni-border-radius;
    background-color: $uni-bg-color ;
    box-shadow: $uni-box-shadow;
    line-height: 90rpx;

    &-take {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;

      &-address {
        display: flex;
      }

      &-time {
        background-color: $uni-text-color-inverse ;
        border-radius: $uni-border-radius;
      }
    }
  }

  &-information {
    margin-top: $uni-margin-top1;
    background-color: $uni-bg-color;
    padding: $uni-padding;
    border-radius: $uni-border-radius;
    box-shadow: $uni-box-shadow;

    &-h1 {
      font-size: 35rpx;
      font-weight: 700;
    }

    &-h4 {
      width: 30%;
      font-size: 28rpx;
    }

    &-size {
      display: flex;
      width: 100%;
      font-size: 30rpx;
      margin-top: $uni-margin-top;


      &-checkbox {
        width: 70%;
        margin-right: 30rpx;
        font-size: 28rpx;
      }
    }

    &-encoding {
      display: flex;
      align-items: center;
      margin-top: $uni-margin-top;

      &-input {
        width: 100%;
        padding: $uni-padding;
        background-color: #f4fbff;
      }
    }
  }

  &-purchase {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 20rpx;
    padding: $uni-padding;
    background-color: $uni-text-color-inverse;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    z-index: 100;

    &-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &-price {
      &-h4 {
        font-size: 40rpx;
        font-weight: 700;
      }

      &-text {
        font-size: 25rpx;
        color: #bababa;
      }
    }

    &-payment {
      background-color: #4fb7ff;
      border-radius: 50rpx;
      padding: 18rpx 35rpx;
      color: $uni-text-color-inverse;
    }
  }

}

.checkbox-item {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .price {
    color: red !important; // 使用 !important 确保样式优先级
    margin-left: 20rpx;
  }
}

.custom-checkbox {
  transform: scale(0.9);
  /* 调整缩放比例 */
}
</style>